<template>
  <div>
    <TopBar :title="routePath | title"></TopBar>
    <!-- 联系人卡片 -->
    <van-empty v-if="list.length === 0" :description="description" />
    <van-pull-refresh v-else v-model="isLoading" @refresh="pullDown">
      <van-list
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-cell v-for="item in list" :key="item._id" @click="toDetail(item._id)">
          <van-swipe-cell>
            <van-row class="container">
              <van-col :span="2">
                <van-icon
                  style="margin-left: 10px; line-height: 8vh;"
                  size="0.8rem"
                  color="rgb(230, 230, 230)"
                  name="smile-comment"
                />
                <!-- <van-icon name="smile-comment" /> -->
              </van-col>
              <van-col style="margin-left:20px;" :span="17">
                <van-row>
                  <p style="margin-top: 10px; font-size: 14px;">
                    {{routePath === 'recipient' ? '笔名：': '名字：'}}
                    <span>{{routePath === 'recipient' ? item.pseudonym : item.recipientName}}</span>
                  </p>
                  <p v-if="routePath !== 'recipient'" style="margin-top: -8px; font-size: 14px;">
                    学号：
                    <span>{{routePath === 'recipient' ? '未知' : item.recipientId}}</span>
                  </p>
                  <p style=" margin-top: -8px;font-size: 14px;">
                    标题：
                    <span>{{item.topic}}</span>
                  </p>
                </van-row>
              </van-col>
              <van-col :span="3" style="text-align: right; padding-right: 3px;">
                <van-icon color="#969799" style="line-height: 10vh;" size="0.45rem" name="arrow" />
              </van-col>
            </van-row>
            <template #right>
              <van-button
                square
                style="height: 100%;"
                type="danger"
                text="删除"
                @click="delList(item)"
              />
            </template>
          </van-swipe-cell>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      information: {},
      list: [],
      routePath: this.$route.name,
      description: "",
      pageNum: 1,
      pageSize: 10,
      loading: false, // true不会触发任何事件，控制加载数据
      isLoading: false, //刷新
      finished: false, //全部数据
      completed: false //是否加载完
    };
  },
  mounted() {
    this.pageNum = 1;
    this.pageSize = 10;
    this.getMailboxList();
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    getMailboxList() {
      let routePath = this.$route.name;
      if (routePath === "sent") {
        this.information.type = "sent";
        this.information.sendStatus = "1";
        this.description = "您暂时还没有发送出去的信息";
      }
      if (routePath === "recipient") {
        this.information.type = "receive";
        this.description = "您暂时还没有收到的信息";
      }

      if (routePath === "draft") {
        this.information.type = "sent";
        this.information.sendStatus = "0";
        this.description = "您暂时还没有存入草稿箱的信息";
      }
      this.information.number = this.userInfo.number;
      this.getListApi();
    },
    getListApi() {
      if (this.completed) return;
      this.loading = true;
      this.$api
        .get("/api/mailbox/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type: this.information.type,
            number: this.information.number,
            sendStatus: this.information.sendStatus
          }
        })
        .then(res => {
          this.list.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        })
        .catch(err => {
          console.log(err, "errerr");
        });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      this.getMailboxList();
    },
    // 下拉刷新
    pullDown() {
      this.list = [];
      this.pageNum = 1;
      this.completed = false;
      this.isLoading = true;
      this.getMailboxList();
    },
    infiniteScroll() {
      this.pageNum++;
      this.getMailboxList();
    },
    toDetail(id) {
      this.$router.push({
        name: "mailboxdetail",
        params: { id, type: this.routePath }
      });
    },
    delList(item) {
      let type = "";
      if (this.routePath === "sent" || this.routePath === "draft") {
        type = "sent";
      }
      if (this.routePath === "recipient") {
        type = "receive";
      }
      this.$api
        .post(`/api/mailbox/delete/${item._id}?type=${type}`, {
          sendStatus: String(item.sendStatus)
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.data.message
          });
          this.pullDown();
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
.container {
  border-bottom: 1px dotted rgb(238, 237, 237);
  background: #fff;
}
</style>